<template>
  <div class="box-main">
    <div class="box-input m-b-4-87">
      <input class="box-input-inner" type="text" placeholder="请输入搜索内容" />
      <img class="box-input-icon" src="@/assets/images/UserManage/icon1.png" alt="" />
    </div>
    <div class="tabs">
      <div class="tabs-btn tabs-btn-active">
        <span>总购买</span>
        <span class="tabs-btn-icon">▼</span>
      </div>
      <div class="tabs-btn">最近购买</div>
    </div>
    <div class="list">
      <div class="list-item" v-for="v in 6" :key="v">
        <div class="list-item-left">
          <img class="list-item-left-avatar" src="@/assets/images/comm/avatar.png" alt="" />
          <div class="list-item-left-content">
            <img class="list-item-left-content-icon" src="@/assets/images/comm/avatar.png" alt="" />
            <p class="list-item-left-content-name">
              原神启动
            </p>
          </div>
        </div>
        <div class="list-item-right">
          <span>2036</span>
          <img class="list-item-right-arrow" src="@/assets/images/UserManage/icon2.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box-main {
  padding: 6.67rem 3.08rem;
  min-height: 100vh;
  box-sizing: border-box;
  background: #FFF;
  font-family: PingFang SC, PingFang SC;

  .m-b-4-87 {
    margin-bottom: 4.87rem;
  }

  .box-input {

    position: relative;

    &-inner {
      box-sizing: border-box;
      width: 100%;
      border: none;
      font-family: PingFang SC, PingFang SC;
      background: #F9F9F9;
      border-radius: 1rem;
      font-weight: 400;
      font-size: 3.59rem;
      color: #333;
      padding: 2.56rem 1.54rem;
    }

    &-icon {
      position: absolute;
      top: 50%;
      right: 1.78rem;
      transform: translateY(-50%);
      width: 4.1rem;
      height: 4.1rem;
      display: block;
    }
  }

  .tabs {
    display: flex;
    gap: 0 3.59rem;
    margin-bottom: 5.38rem;

    &-btn {
      background: #F4F7FF;
      border-radius: 3.33rem;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 3.08rem;
      color: #666666;
      padding: 1.03rem 2.56rem;
      display: flex;
      &-icon {
        width: 2.31rem;
        height: 2.31rem;
        display: block;
        margin-left: 0.51rem;
      }
    }

    &-btn-active {
      background: #FBEBF0;
      color: #DC376B;
    }
  }

  .list {
    &-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2.56rem 0;
      border-bottom: 0.13rem solid #EEEEEE;

      &:first-child {
        padding-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }

      &-left {
        display: flex;
        align-items: center;

        &-avatar {
          width: 10.77rem;
          height: 10.77rem;
          display: block;
        }

        &-content {
          margin-left: 2.31rem;
          font-weight: 400;
          display: flex;
          align-items: center;

          &-name {
            font-size: 4.1rem;
            color: #333333;
            line-height: 5.64rem;
          }

          &-icon {
            width: 4.62rem;
            height: 4.62rem;
            display: block;
            margin-right: 1.03rem;
          }

        }
      }

      &-right {
        font-weight: 500;
        font-size: 4.1rem;
        color: #DC376B;
        line-height: 5.64rem;
        display: flex;
        align-items: center;

        &-arrow {
          width: 2.56rem;
          height: 2.56rem;
          display: block;
          margin-left: 1.03rem;
        }
      }
    }
  }
}
</style>